<template>
  <div class="clue">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="全部" name="one">
        <AllFollowUp v-if="activeName === 'one'" />
      </el-tab-pane>
      <el-tab-pane label="我的" name="two">
        <AllFollowUp :selectedClue="selectedClue" v-if="activeName === 'two'" />
      </el-tab-pane>     
    </el-tabs>
  </div>
</template>

<script setup>
import AllFollowUp from './components/allFollowUp.vue'
import { ref } from 'vue'
const selectedClue = ref(1)
const activeName = ref('one')
const handleClick = (tab) => {
  // console.log(tab)
  activeName.value = tab.props.name
}
</script>
<style lang="scss" scoped>
.clue {
  height: 100%;
  overflow: auto;
}
</style>
<style lang="scss" scoped>
:deep(.demo-tabs) {
  .el-tabs__content {
    /* padding: 20px; */
    overflow: visible;
  }
}

:deep(.el-tabs__nav-scroll) {
  .el-tabs__nav {
    // display: flex !important;
    // justify-content: flex-end !important;
    .el-tabs__item {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.6);
      padding: 0 20px;
    }
  }
}
</style>